<template>
  <div v-loading="loading">
    <h1>加班申请表</h1>
    <div>
      <div style="height:30px">
        <el-input v-model="Fname" placeholder="输入审核人名称" style="width:200px;float:left;margin-right:10px" size="mini"></el-input>
        <el-button size="mini" @click="findByName" style="float:left" icon="el-icon-search">查询</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" border size="mini" v-loading="tableLoading" @selection-change="handleSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="application_id" label="加班申请表id" v-if="false"></el-table-column>
        
        <el-table-column prop="user_id" label="申请人id" v-if="false"></el-table-column>
        <el-table-column prop="user_name" label="申请人姓名" align="center" width="100"></el-table-column>
        <el-table-column prop="audit_level_id" label="审核级数" v-if="true" :formatter="showAL"  align="center"></el-table-column>
        <el-table-column prop="project_id" label="加班项目id" v-if="false"></el-table-column>
        <el-table-column prop="application_context" label="加班事由" align="center"></el-table-column>
        <el-table-column prop="application_type" label="加班类型" :formatter="showType" align="center" width="100"></el-table-column>
        <el-table-column prop="application_time" label="申请时间" align="center" width="140"></el-table-column>
        <el-table-column prop="application_status" label="申请状态" :formatter="showStatus" align="center" width="100"></el-table-column>
        <el-table-column prop="project_name" label="加班项目" align="center" width="130"></el-table-column>
        
        <el-table-column prop="application_note" label="备注" align="center" width="200"></el-table-column>
        <el-table-column prop="audit_level_now" label="当前审核序号" align="center" v-if="true"></el-table-column>
        <el-table-column prop="edit" label="操作" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click"> 
              <el-button size='mini' icon="el-icon-arrow-down" ref="btn"></el-button>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span @click="audit(scope.row)">审核</span></el-dropdown-item>
              <el-dropdown-item><span @click="callBack(scope.row)">打回</span></el-dropdown-item>
              <el-dropdown-item><span @click="look(scope.row)">查看</span></el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-button size="mini"  type="primary" @click="audit(scope.row)">
              审核
            </el-button>
            <el-button size="mini" type="danger" @click="callBack(scope.row)">
              打回
            </el-button> -->
            <!-- <el-button size="mini" type="danger" @click="look(scope.row)">
              查看
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height:40px;margin-top:10px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total.length" style="float:left">
        </el-pagination>
    </div>
    <div style="margin-left:-950px">
      <el-button size="mini" type="danger" :disabled="selectRow.length==0" @click="auditAll">批量审核</el-button>
      <el-button size='mini' type="danger" :disabled="selectRow.length==0" @click="callBackAll">批量打回</el-button>
    </div>
    <div>
      <el-dialog title="查看"
          :visible.sync="dialogVisible"
          width="35%" float="left">
        <div  style="margin-left:-15px">
          <span>申请人姓名</span>
          <el-input v-model="user_name" readonly size="mini" style="width: 200px"></el-input>
        </div>
        <div style="margin-top:10px">
          <span style="line-height:center">加班事由</span>
          <el-input v-model="application_context" readonly type="textarea" size="mini" style="width: 200px"></el-input>
        </div>
        <!-- <div style="margin-top:10px">
          <span>加班类型</span>
          <el-input v-model="application_type" readonly size="mini" style="width: 200px"></el-input>
        </div> -->
        <div style="margin-top:10px">
          <span>申请时间</span>
          <el-input v-model="application_time" readonly size="mini" style="width: 200px"></el-input>
        </div>
        <div style="margin-top:10px;margin-left:-57px">
          <span>预计加班开始时间</span>
          <el-input v-model="application_start_time" readonly size="mini" style="width: 200px"></el-input>
        </div>
        <div style="margin-top:10px;margin-left:-29px" v-if="application_audit_time"> 
          <span>上级审核时间</span>
          <el-input v-model="application_audit_time" readonly size="mini" style="width: 200px"></el-input>
        </div>
        <div style="margin-top:10px;margin-left:-29px" v-if="application_note_before">
          <span>上级审核意见</span>
          <el-input v-model="application_note_before" readonly size="mini" style="width: 200px" type="textarea"></el-input>
        </div>
        <div  style="margin-top:10px;margin-left:-6px">
          <span style="color:red">*</span><span>审核意见</span>
          <el-input v-model="application_note" size="mini" style="width: 200px"></el-input>
        </div>
        <div style="margin-top:10px">
          <el-button size="mini"  type="primary" @click="audit(rowData)">
              审核
          </el-button>
          <el-button size="mini" type="danger" @click="callBack(rowData)">
            打回
          </el-button>
        </div>
        <div style="margin-top:10px">
          <span class="remark">*,打回时需填写审核备注,标明打回原因</span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        Fname:'',
        pagesize:10,
        currentPage:1,
        application_start_time:'',
        application_time:'',
        application_type:'',
        application_context:'',
        user_name:'',
        tableData:[],
        tableLoading:false,
        dialogVisible:false,
        rowData:'',
        total:[],
        application_note:'-1',
        application_note_before:'',
        application_audit_time:'',
        selectRow:[],
        loading:false,
      }
    },
    mounted:function(){
      this.tableLoading=true;
      this.loadApplication(true);
    },
    methods:{
      //获取表格数据
      loadApplication(data){
        if(data){
          this.loadTotal();
        }
        var _this = this;
        this.loading = true;
        this.postRequest('/audit/getApplication',{
          name:this.Fname,
          start:this.pagesize*(this.currentPage-1),
          pageSize:this.pagesize
        }).then(resp=>{
          this.loading = false;
          this.tableLoading=false;
          if(resp&&resp.status==200){
            _this.tableData=resp.data
          }
        });
      },
      loadTotal(){
        var _this = this;
        this.postRequest('/audit/getTotal',{
          name:this.Fname
        }).then(resp=>{
          this.tableLoading=false;
          if(resp&&resp.status==200){
            _this.total=resp.data
          }
        });
      },
      close(){
        this.dialogVisible=false;
        this.application_note='-1';
      },
      //审核
      audit(data){
        var _this=this;
        this.loading = true;
        this.postRequest('/audit/audit',{
          audit_level_now:data.audit_level_now,
          application_id:data.application_id,
          audit_level_id:data.audit_level_id,
          application_note:this.application_note
        }).then(resp=>{
          this.loading = false;
          var data1 = resp.data;
          this.$message({type:data1.status,message:data1.msg});
          this.loadApplication();
          this.loadTotal()
          this.close();
        })
      },
      //打回
      callBack(data){
        if(this.application_note==''){
          this.$message({type:'warn',message:'打回请填写审核意见'});
          return
        }
        var _this=this;
        this.loading = true;
        this.postRequest('/audit/callBack',{
          application_id:data.application_id,
          application_note:this.application_note
        }).then(resp=>{
          this.loading = false;
          var data1 = resp.data;
          this.$message({type:data1.status,message:data1.msg});
          this.loadApplication();
          this.loadTotal()
          this.close();
        })
      },
      //查看
      look(data){
        this.application_note='';
        this.dialogVisible=true;
        this.rowData=data;
        this.application_time = data.application_time;
        this.application_start_time = data.application_start_time;
        this.user_name = data.user_name;
        this.application_context = data.application_context;
        this.application_type = data.application_type;
        this.application_note_before=data.application_note;
        this.application_audit_time=data.application_audit_time
      },
      handleSizeChange(val){
        this.pagesize = val;
        this.tableLoading=true;
        this.loadApplication();
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.tableLoading=true;
        this.loadApplication();
      },
      showType(row,column){
        switch(row.application_type){
          case 0:
              return '工作日加班';
              break;
          case 1:
              return '公休日加班';
              break
          case 2:
              return '法定节假日加班';
              break;
        }
      },
      showStatus(row,column){
        switch(row.application_status){
          case 1:return '已申请'
          case 2:return '审核中'
          case 3:return '已审核'
          case 4:return '打回'
        }
      },
      showAL(row,column){
        switch(row.audit_level_id){
          case 1:return '一级审核'
          case 2:return '二级审核'
          case 3: return '三级审核'
        }
      },
      //模糊查询
      findByName(){
          this.pagesize=10;
          this.currentPage=1;
          this.loadApplication(true)
      },
      //多选
      handleSelectionChange(val){
        this.selectRow=val;
        
      },
      //批量审核
      auditAll(){
        var _this = this;
        this.$confirm('批量审核' + this.selectRow.length + '条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var multipleSelection = _this.selectRow;
          var data = [];
          multipleSelection.forEach(row=> {      
            data.push(row.application_id)
            
          })
          
          console.log(data)
          this.loading = true;
          this.postRequest('/audit/auditAll',{
            application_ids:data
          }).then(resp=>{
            this.loading = false;
            var data1 = resp.data;
            this.$message({type:data1.status,message:data1.msg});
            this.loadApplication();
            this.loadTotal()
            this.close();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量审核'
          });
        });
      },
      //批量打回
      callBackAll(){
        var _this = this;
        this.$confirm('批量打回' + this.selectRow.length + '条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var multipleSelection = _this.selectRow;
          var data = [];
          multipleSelection.forEach(row=> {      
            data.push(row.application_id)
          })
          this.loading = true;
          this.postRequest('/audit/callBackAll',{
            application_ids:data
          }).then(resp=>{
            this.loading = false;
            var data1 = resp.data;
            this.$message({type:data1.status,message:data1.msg});
            this.loadApplication();
            this.loadTotal()
            this.close();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量打回'
          });
        });
      }
    }
  }
</script>
<style>
  .remark{
    color:gainsboro;
    font-size: 12px
  }
</style>
